<template>
  <div>

    <bread first="商品管理"
           second="商品添加"></bread>

    <el-card>
      <el-alert title="添加商品的信息"
                type="info"
                center
                show-icon>
      </el-alert>
      <!-- 进度条 -->
      <el-steps :space="200"
                align-center
                :active="Number(tabsVal)"
                finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 进度条 -->

      <!-- 标签页 -->
      <!-- 基本信息 -->
      <el-tabs v-model="tabsVal"
               :plain="true"
               @tab-click='tabClick'
               :before-leave='beforeLeave'
               :tab-position="tabPosition">
        <el-tab-pane label="基本信息"
                     name="0">
          <el-form :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm"
                   class="demo-ruleForm">
            <el-form-item label="商品名称"
                          prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"
                          prop="price">
              <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量"
                          prop="weight">
              <el-input v-model="ruleForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量"
                          prop="num">
              <el-input v-model="ruleForm.num"></el-input>
              <!-- 级联选择器 -->
            </el-form-item>
            <el-form-item label="商品重量"
                          prop="weight">
              <el-cascader v-model="value"
                           :options="options"
                           @change="handleChange"
                           :plain="true"
                           :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 基本信息 -->

        <!-- 商品参数 -->
        <el-tab-pane label="商品参数"
                     name='1'>配置管理</el-tab-pane>
        <!-- 商品参数 -->
        <!-- 商品属性 -->
        <el-tab-pane label="商品属性"
                     name='2'>角色管理</el-tab-pane>
        <!-- 商品属性 -->
        <!-- 商品图片 -->
        <el-tab-pane label="商品图片"
                     name='3'>
          <el-upload class="avatar-uploader"
                     action="https://www.liulongbin.top:8888/api/private/v1/upload"
                     :headers=headers
                     list-type="picture-card"
                     :on-success="handleAvatarSuccess"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove">

            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- :visible.sync="dialogVisible"放大镜 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="">
          </el-dialog>
        </el-tab-pane>
        <!-- 商品图片 -->
        <!-- 商品内容 -->
        <el-tab-pane label="商品内容"
                     name='4'>
          <!-- bidirectional data binding（双向数据绑定） -->

          <quill-editor v-model="content"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)">
          </quill-editor>

        </el-tab-pane>
        <!-- 商品内容 -->
      </el-tabs>
      <!-- 标签页 -->

    </el-card>

  </div>
</template>

<script>
import { goodsParamsApi, goodsParamsLayerApi } from '../../api'

export default {
  name: '',
  data () {
    return {
      tabPosition: 'left',
      tabsVal: '0',
      // 基本信息表单校验
      rules: {
        name: [
          { required: true, message: '商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '商品价格', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '商品重量', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '商品数量', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 基本信息表单对应值
      ruleForm: {
        name: '',
        price: '',
        weight: '',
        num: ''
      },
      // 级联选择器
      value: [],
      options: [],
      // 判断Tabs是否跳转
      stateLeave: false,
      // 判断是only属性还是many参数
      editableTabsValue: '',
      // 图片路径
      dialogImageUrl: '',
      // 放大镜
      dialogVisible: false,
      // 获取token
      headers: { Authorization: localStorage.getItem('token') },
      // 添加商品数据
      dataForm: {
        id: '',
        goods_name: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      // 富文本
      editorOption: {},
      content: ''
    }
  },
  methods: {
    // 获取级联选择器里的数据
    async getCategories () {
      const res = await goodsParamsApi()
      this.options = res.data.data
    },
    // 判断Tabs是否跳转
    beforeLeave () {
      if (!this.stateLeave) {
        this.$message({
          showClose: true,
          message: '请先选择商品分类',
          type: 'error'
        })
      }
      return this.stateLeave
    },
    // 级联选择器的钩子函数
    async handleChange (value) {
      if (value.length === 3) {
        this.stateLeave = true
      } else {
        this.$message({
          message: '只能选择三级商品分类',
          type: 'warning'
        })
        this.value = []
        // 改变Tabs跳转
        this.stateLeave = false
      }
    },
    // Tabs选中时触发 发送请求
    async tabClick (tab) {
      // 判断是only属性还是many参数并赋值给editableTabsValue
      if (tab.name === '1') {
        this.editableTabsValue = 'many'
        // 判断数组长度决定是否 请求参数或属性数据
        if (this.value.length === 3) {
          goodsParamsLayerApi(this.value[this.value.length - 1], this.editableTabsValue)
        }
      } else if (tab.name === '2') {
        this.editableTabsValue = 'only'
        // 判断数组长度决定是否 请求参数或属性数据
        if (this.value.length === 3) {
          goodsParamsLayerApi(this.value[this.value.length - 1], this.editableTabsValue)
        }
      } else {

      }
    },
    // 图片上传函数
    // 文件上传成功的钩子
    handleAvatarSuccess (res) {
      const oicObj = {
        pic: res.data.tmp_path
      }
      this.dataForm.pics.push(oicObj)
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 富文本
    // 失去焦点触发
    onEditorBlur (e) {
      console.log('editor blur!')
    }
  },
  created () {
    this.getCategories()
  }
}
</script>
<style lang='less'  scoped>
/deep/.ql-container {
  height: 400px;
}
.el-alert {
  margin-bottom: 20px;
}
.el-steps {
  margin-bottom: 40px;
}
/deep/.el-form-item__label {
  float: none;
}
/deep/.el-form-item__content {
  margin-left: 0;
}
//图片上传
/deep/.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
  i {
    border: 1px dashed #c0ccda;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
